<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>position</title>
	<style type="text/css">
	*{	
		margin: 0;
		padding: 0；
	}

	.page{ 
		width: 100%;
		height: 4034px;
		background: url("mooc.png") center top no-repeat;
	}

	.nav{ 
		width: 160px;
		height: 205px;
		position: fixed;
		left: 0;
		top: 50%;
		margin-top: -103px;
		font-family: 'Microsoft YaHei'
	}

	.nav-li{ 

		width: 160px;
		height: auto;
		border-bottom: 1px solid #FFF;
		background-color: #333;
		text-align: center;
		line-height: 40px;
		color: #FFF;
		font-size: 16px;
		cursor: pointer;	/*改变鼠标指针形状*/
	}

	.tit{ 
		width: 160px;
		height: 40px;
	}

	.nav-li:hover ul{ 
		display: block;		/*列表块状显示*/
	}

	.nav-li ul{ 
		width: 160px;
		height: auto;
		background:#FFF; 
		display: none;
	}

	.nav-li ul li{ 
		width: 158px;
		height: 40px;
		border: 1px dashed #666;
		color:#333;
		text-align: center;
		line-height: 40px;
		list-style: none;
	}
	</style>
</head>
<body>
	<div class="page">
		<div class="nav">
			<div class="nav-li">
				<div class="tit">慕课网的标题</div>
				<ul>
					<li>
						二级栏目
					</li>
					<li>
						二级栏目
					</li>
					<li>
						二级栏目
					</li>
				</ul>
			</div>
			<div class="nav-li">慕课网的标题</div>
			<div class="nav-li">慕课网的标题</div>
			<div class="nav-li">慕课网的标题</div>
			<div class="nav-li">慕课网的标题</div>
		</div>
	</div>
</body>
</html>